import React, { Suspense } from 'react'
import { Router, Route, Redirect, Switch } from 'react-router-dom'
import AuthRoute from './components/AuthRoute'
import Loading from './components/Loading'
// import Article from './pages/Article'
// import SearchResult from './pages/Search/Result'
// import Search from './pages/Search/Result'
// import Srarch from './pages/Srarch'
import history from './utils/history'
// import ProfileChat from './pages/Profile/Chat'
// import Layout from './Layout'
// import Login from './Login'

const Layout = React.lazy(() => import('./pages/Layout'))
const Login = React.lazy(() => import('./pages/Login'))
const NotFound = React.lazy(() => import('./pages/NotFound'))
const Text = React.lazy(() => import('./pages/Text'))
const ProfileEdit = React.lazy(() => import('./pages/Profile/Edit'))
const ProfileChat = React.lazy(() => import('./pages/Profile/Chat'))
const Srarch = React.lazy(() => import('./pages/Search'))
const SearchResult = React.lazy(() => import('./pages/Search/Result'))
const Search = React.lazy(() => import('./pages/Search/Result'))
const Article = React.lazy(() => import('./pages/Article'))

export default function App() {
  return (
    <div>
      <Router history={history}>
        <Suspense fallback={<Loading />}>
          <Switch>
            {/* 重定向 , exact 精确匹配 */}
            <Redirect exact from="/" to="/home" />
            {/* <Route path="/login" component={Login}></Route> */}
            <Route path="/login" render={() => <Login />}></Route>
            <Route path="/srarch" render={() => <Srarch />}></Route>
            <Route path="/article/:id" component={Article}></Route>
            <Route
              path="/search/result"
              render={() => <SearchResult />}
            ></Route>
            <Route path="/search" render={() => <Search />}></Route>
            <AuthRoute path="/profile/edit" component={ProfileEdit}></AuthRoute>
            <Route path="/profile/chat" component={ProfileChat}></Route>
            <Route path="/home" component={Layout}></Route>
            <Route path="/text" component={Text}></Route>
            <Route path="*" component={NotFound}></Route>
          </Switch>
        </Suspense>
      </Router>
    </div>
  )
}
